<template>
<<<<<<< HEAD
<div style="background-color:#67c23a41;height:736px;">
<div style="width:400px;">
  <div>(❁´◡`❁)</div>
=======
<div style="width:400px">
  <div></div>
>>>>>>> b1cd95d47b3903925076cec3bba8675efd049f1e
  <div style="margin-right:10px;margin-top:50px">
  <el-form :model="form">
    <el-form-item label="订单类型" :label-width="formLabelWidth">
      <el-select  v-model="form.type" placeholder="请选择类型"
<<<<<<< HEAD
      style="width:143px;"
      >
        <el-option   value="宿递来啦"><p @click="jiage1">宿递来啦</p></el-option>
        <el-option   value="疾如猛火"><p @click="jiage2">疾如猛火</p></el-option>
        </el-select >
=======
      style="width:130px"
      >
        <el-option   value="宿递来啦"><p @click="jiage1">宿递来啦</p></el-option>
        <el-option   value="疾如猛火"><p @click="jiage2">疾如猛火</p></el-option>
        </el-select>
>>>>>>> b1cd95d47b3903925076cec3bba8675efd049f1e
          &nbsp;订单金额:&nbsp;
        <el-input
          placeholder="元"
          :disabled="true"
<<<<<<< HEAD
          style="width:50px;margin-right:0px"
=======
          style="width:50px"
>>>>>>> b1cd95d47b3903925076cec3bba8675efd049f1e
          v-model="input">
          
        </el-input>
    </el-form-item>

<<<<<<< HEAD
    <el-form-item label="收货区域" :label-width="formLabelWidth" style="width:270px">
      <el-cascader
                 style="margin-right:0px"
=======
    <el-form-item label="收货区域" :label-width="formLabelWidth">
      <el-cascader
                 
>>>>>>> b1cd95d47b3903925076cec3bba8675efd049f1e
                  size="large"
                  :options="options"
                  v-model="selectedOptions"
                  @change="handleChange">
            </el-cascader>
    </el-form-item>
    <el-form-item label="详细地址" :label-width="formLabelWidth">
      <el-input v-model="form.value1" autocomplete="off"></el-input>
    </el-form-item>
<<<<<<< HEAD
    <el-form-item label="收货时间" :label-width="formLabelWidth" style="width:270px">
     <el-date-picker
     style="margin-right:0px"
=======
    <el-form-item label="收货时间" :label-width="formLabelWidth">
     <el-date-picker
>>>>>>> b1cd95d47b3903925076cec3bba8675efd049f1e
      v-model="form.value2"
      :picker-options="pickerOptions0"
      type="date"
      placeholder="期望收货日期"
      format="yyyy 年 MM 月 dd 日"
      value-format="yyyy-MM-dd">
    </el-date-picker>
    
</el-form-item>
<el-form-item label="货物信息" :label-width="formLabelWidth">
      <el-input v-model="form.value4" autocomplete="off"></el-input>
      
      <el-select  v-model="form.type1" placeholder="请选择货物类型"
<<<<<<< HEAD
      style="width:270px;margin-right:0px"
=======
      style="width:150px,margin-left:100px"
>>>>>>> b1cd95d47b3903925076cec3bba8675efd049f1e
      >
        <el-option   value="普通食品"><p>普通食品</p></el-option>
        <el-option   value="生鲜"><p>生鲜</p></el-option>
        <el-option   value="衣物"><p>衣物</p></el-option>
        <el-option   value="易碎物品"><p>易碎物品</p></el-option>
        <el-option   value="冷冻物品"><p>冷冻物品</p></el-option>
        <el-option   value="文件"><p>文件</p></el-option>
        <el-option   value="其他"><p>其他</p></el-option>
        </el-select>
        <el-select  v-model="form.type2"
         placeholder="预估货物质量"
<<<<<<< HEAD
      style="width:270px;margin-right:0px"
=======
      style="width:150px,margin-left:100px"
>>>>>>> b1cd95d47b3903925076cec3bba8675efd049f1e
      >
        <el-option table="<0.5kg"  value="<0.5kg"></el-option>
        <el-option table="0.5kg~1.0kg"  value="0.5kg~1.0kg"></el-option>
        <el-option table="1.0kg~1.5kg"  value="1.0kg~1.5kg"></el-option>
        <el-option table="1.5kg~2.0kg"  value="1.5kg~2.0kg"></el-option>
        <el-option table="2.0kg~3.0kg"  value="2.0kg~3.0kg"></el-option>
        <el-option table="3.0kg~4.0kg"  value="3.0kg~4.0kg"></el-option>
        <el-option table="4.0kg~5.0kg"  value="4.0kg~5.0kg"></el-option>
        <el-option table="5.0kg~8.0kg"  value="5.0kg~8.0kg"></el-option>
        <el-option table=">8.0kg"  value=">8.0kg"></el-option>
        </el-select>
          
          
        
    
    </el-form-item>
    <el-form-item label="联系电话" :label-width="formLabelWidth">
      <el-input v-model="form.value5" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="备注" :label-width="formLabelWidth">
      <el-input v-model="form.value3" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
<<<<<<< HEAD
  
</div>
</div>
  <div style="margin-top:129px">
    <el-button-group>
    <el-button type="success" plain @click="back" style="width:138px;font-size:18px">取 消</el-button>
    <el-button type="success"  @click="xiadan" style="width:138px;font-size:18px">确 定</el-button>
    <el-button type="success" plain @click="chuan1" style="width:138px;font-size:18px;">我的账户</el-button>
    </el-button-group>
  </div>
</div>
=======
  <div slot="footer" class="dialog-footer">
    <a href="http://localhost:8081/#/shouye"><el-button style="width:100px">取 消</el-button></a>
    <el-button type="success" @click="xiadan" style="width:100px">确 定</el-button>
  </div>
</div>
</div>
>>>>>>> b1cd95d47b3903925076cec3bba8675efd049f1e
</template>

<script>
export default {
  data() {
    return {
      pickerOptions0: {
    disabledDate(time) {
      return time.getTime() < Date.now()- 8.64e7;
    }
  },
      uid: 1,
      id: 1,
      list: [],
      tabledata: [],
      input: '',
      search: "",
<<<<<<< HEAD
      input1:'',
      input2:'',
      input3:'',
      input4:'',
      inputt:'',
      alist:[],
=======
      
>>>>>>> b1cd95d47b3903925076cec3bba8675efd049f1e
      dialogFormVisible: false,
      selectedOptions: [],
      options: regionDataPlus,
      address: '',
<<<<<<< HEAD
      newList : {},
=======
      
>>>>>>> b1cd95d47b3903925076cec3bba8675efd049f1e
        form: {
          provinces:"",
          city:"",
          area:"",
          type: '',
          type1: '',
          value1: '',
          value2: '',
          value3: '',
          value4: '',
          value5: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
          
        },
        formLabelWidth: '120px',
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
        
        }
        },
        
    }
  },
  created() {
    
    this.gettabledata()
<<<<<<< HEAD
    this.test();
=======
    
>>>>>>> b1cd95d47b3903925076cec3bba8675efd049f1e
  },
  
      

  methods: {
<<<<<<< HEAD
    test(){
      this.newList =  this.$route.query.qaq; //获取id
      
      console.log("zhuye"+this.newList)
      
      
    },
    chuan1(){
        console.log("zhuye" + this.newList)
        this.$router.push({path : "/mine",query:{ qaq : this.newList}})//传
    },
    back(){
      this.$router.go(-1);
    },
=======
>>>>>>> b1cd95d47b3903925076cec3bba8675efd049f1e
    
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleChange() {
     
      this.form.provinces= CodeToText[this.selectedOptions[0]]
      this.form.city= CodeToText[this.selectedOptions[1]]
      this.form.area= CodeToText[this.selectedOptions[2]]
      
    }, 
    //下单方法
    handleDelete(index, row) {
      // console.log(index, row);
      console.log(row.type);
      this.axios({
        method: "post",
        url: 'http://localhost:3000/received',
        data: {
          type: row.type,
          type1: row.type1,
          type2: row.type2,
          area1: row.area1,
          area2: row.area2,
          area3: row.area3,
          date: row.date,
          money:row.money,
          value1:row.value1,
          id:row.id
        }
      }).then(res => {
         this.axios
        .delete("http://localhost:3000/dingdan/" + row.id)
        .then((response) => {
          
        });
        this.query();
      });
    },
    
    jiage1(){
        this.$data.input=10
      },
    jiage2(){
        this.$data.input=20
      },
    
 edit(item){//省市回显      
     this.selectedOptions.push(TextToCode[this.form.provinces].code,TextToCode[this.form.provinces][this.form.city].code)
  }, 
    
    
    gettabledata() {
      this.axios.get("http://localhost:3000/dingdan").then((a) => {
        this.tabledata = a.data;
        console.log(a)
      });
    },
    
    xiadan(){
      let add = this.form
      this.axios({
        method: "post",
        url: 'http://localhost:3000/dingdan',
        data: {
          type: this.form.type,
          type1: this.form.type1,
          type2: this.form.type2,
          area1: this.form.provinces,
          area2: this.form.city,
          area3: this.form.area,
          date: this.form.value2,
          money: this.input,
          value1: this.form.value1,
        }
      }).then(res => {
     console.log(res.data)
          alert("下单成功")
          this.gettabledata()
      })
    }
  },
};
import { 
  provinceAndCityData, 
  regionData, 
  provinceAndCityDataPlus, 
  regionDataPlus, 
  CodeToText, 
  TextToCode 
  } from 'element-china-area-data'

</script>


    